<template>
	<!-- 底部导航栏 -->
	<u-tabbar :value="index" :border="false" :fixed="true" :placeholder="false" :safeAreaInsetBottom="true"
		activeColor="#01ab36">
		<slot></slot>
		<u-tabbar-item text="首页" icon="home-fill" @click="toHome"></u-tabbar-item>
		<u-tabbar-item text="分类" icon="grid-fill" @click="toCate"></u-tabbar-item>
		<u-tabbar-item text="购物车" @click="toCart">
			<unt-icon slot="active-icon" name="icon-cart-fill" color="#01ab36" size="17"></unt-icon>
			<unt-icon slot="inactive-icon" name="icon-cart-fill" color="#999" size="17"></unt-icon>
		</u-tabbar-item>
		<u-tabbar-item text="我的" icon="account-fill" @click="toMy"></u-tabbar-item>
	</u-tabbar>
</template>

<script>
	export default {
		name: "unt-tab-bar",
		data() {
			return {};
		},
		props: {
			index: {
				type: Number,
				default: null,
			}
		},
		methods: {
			toHome() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			toCate() {
				uni.switchTab({
					url: "/pages/categorize/categorize"
				})
			},
			toCart() {
				uni.switchTab({
					url: "/pages/cart/cart"
				})
			},
			toMy() {
				uni.switchTab({
					url: "/pages/my/my"
				})
			}
		}
	}
</script>